<div class="{{b 'side-nav' 'head'}}">
    <a href="." class="{{b 'side-nav' 'brand'}}">
        <span class="{{b 'side-nav' 'brand-text'}}">Allure</span>
    </a>
</div>
<ul class="{{b 'side-nav' 'menu'}}">
    {{#each tabs}}
        <li class="{{b 'side-nav' 'item'}}" data-tooltip="{{t title}}">
            <a href="#{{tabName}}" class="{{b 'side-nav' 'link' active=active}}">
                <span class="{{b 'side-nav' 'icon'}} {{icon}}"></span>
                <div class="{{b 'side-nav' 'text'}}">{{t title}}</div>
            </a>
        </li>
    {{/each}}
</ul>
<div class="{{b 'side-nav' 'strut'}}"></div>
<div class="{{b 'side-nav' 'footer'}}">
    <div class="{{b 'side-nav' 'item'}}" data-tooltip="{{t 'controls.language'}}">
        <button class="{{b 'button'}} {{b 'button' inverse=true}} {{b 'side-nav' 'language-small' lang=language.id}}">
            {{language.id}}
        </button>
    </div>

    <div class="{{b 'side-nav' 'item'}} " data-tooltip="{{t 'controls.expand'}}">
        <div class="{{b 'side-nav' 'collapse'}}">
            <span class="{{b 'side-nav' 'icon'}} fa fa-angle-left"></span>
            <span class="{{b 'side-nav' 'text'}}">{{t 'controls.collapse'}}</span>
        </div>
    </div>
</div>
